<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
request.setAttribute("path", path);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>收货地址-卓应商城</title>

	<link rel="stylesheet" href="/common/css/userinfo/base.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/global.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/header.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/home.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/user.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/bottomnav.css" type="text/css">
	<link rel="stylesheet" href="/common/css/userinfo/footer.css" type="text/css">

	<script type="text/javascript" src="/common/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="/common/js/order/header.js"></script>
	<script type="text/javascript" src="/common/js/order/home.js"></script>
	
	<script>
		$(document).ready(function(){
			//判断有多少收货地址
			if($("#addrNum").text()>=20){
				$("#add-address").click(function(){
					alert("收货地址已达到最大数量");
				});
				$("#add-address-bottom").click(function(){
					alert("收货地址已达到最大数量");
				});
				return;
			}
			
			//新增收货地址
			$("#add-address").click(function(){
				$("#change-addrtitle").text("添加收货地址");
				$(".mask-trans").removeClass("hide");
				$(".thickbox").removeClass("hide");
				$("#find-addr").attr("id","add-addr");
			});
			$("#add-address-bottom").click(function(){
				$("#change-addrtitle").text("添加收货地址");
				$(".mask-trans").removeClass("hide");
				$(".thickbox").removeClass("hide");
				$("#find-addr").attr("id","add-addr");
			});
			
			//编辑收货地址
			$(".edit-addr").click(function(){
				var zyaid = $(this).parent().find("input").val();
				var surname = $(this).parent().parent().parent().find(".div-surname").text();
				var sheng = $(this).parent().parent().parent().find(".div-sheng").text();
				var shi = $(this).parent().parent().parent().find(".div-shi").text();
				var qu = $(this).parent().parent().parent().find(".div-qu").text();
				var juti = $(this).parent().parent().parent().find(".div-juti").text();
				
				$(this).removeAttr("href");
				$("#change-addrtitle").text("编辑收货地址");
				$(".mask-trans").removeClass("hide");
				$(".thickbox").removeClass("hide");
				$("#find-addr").attr("id","change-addr");
				$("#get-zyaid").attr("value",zyaid);
				$("#surname").attr("value",surname);
				$("#sheng").attr("value",sheng);
				$("#shi").attr("value",shi);
				$("#qu").attr("value",qu);
				$("#juti").attr("value",juti);
			});
			
			//验证收货人(必须是本人)
			$("#surname").on("blur",function(){
				testSurname();
			});
			
			//验证地址是否完整
			$("#sheng").on("blur",function(){
				testSheng();
			});
			$("#shi").on("blur",function(){
				testShi();
			});
			$("#qu").on("blur",function(){
				testQu();
			});
			$("#juti").on("blur",function(){
				testJuti();
			});
			
			//取消修改地址
			$("#cancel").click(function(){
				$("input[class='input-text input-text-one']").val("");
				$("input[class='input-text input-text-two']").val("");
				$("span[class='versomething']").text("");
				$(".thickbox").addClass("hide");
				$(".mask-trans").addClass("hide");
			});
			
			//保存收货地址
			$(".button").find("a").click(function(){
				if($(this).attr("id")=="change-addr"){
					if(testSurname()&&testSheng()&&testShi()&&testQu()&&testJuti()){
						$(".addr-form").attr("action","/user/updateadd");
						$(".addr-form").submit();
					}
				}
				if($(this).attr("id")=="add-addr"){
					if(testSurname()&&testSheng()&&testShi()&&testQu()&&testJuti()){
						$(".addr-form").attr("action","/user/insertadd");
						$(".addr-form").submit();
					}
				}
			});
			
			//验证收货人
			function testSurname(){
				var flag = true;
				var hideSur = $("#surname-hide").val();
				var surname = $("#surname").val();
				
				if(surname==""){
					$("#versurname").text("请填写您本人的真实名字");
					$("#versurname").removeClass("green");
					$("#versurname").addClass("red");
					flag = false;
					return flag;
				}
				if(surname!=hideSur){
					$("#versurname").text("请填写您本人的真实名字");
					$("#versurname").removeClass("green");
					$("#versurname").addClass("red");
					flag = false;
					return flag;
				}else{
					$("#versurname").text("");
					$("#versurname").removeClass("red");
					$("#versurname").addClass("green");
					flag = true;
					return flag;
				}
			}
			
			//验证地址完整性
			function testSheng(){
				var flag = true;
				if($("#sheng").val()==""){
					$("#versheng").text("请选择省");
					$("#versheng").removeClass("green");
					$("#versheng").addClass("red");
					flag = false;
					return flag;
				}else{
					$("#versheng").text("");
					$("#versheng").removeClass("red");
					$("#versheng").addClass("green");
					flag = true;
					return flag;
				}
			}
			
			function testShi(){
				var flag = true;
				if($("#shi").val()==""){
					$("#vershi").text("请选择市");
					$("#vershi").removeClass("green");
					$("#vershi").addClass("red");
					flag = false;
					return flag;
				}else{
					$("#vershi").text("");
					$("#vershi").removeClass("red");
					$("#vershi").addClass("green");
					flag = true;
					return flag;
				}
			}
			
			function testQu(){
				var flag = true;
				if($("#qu").val()==""){
					$("#verqu").text("请选择区/县");
					$("#verqu").removeClass("green");
					$("#verqu").addClass("red");
					flag = false;
					return flag;
				}else{
					$("#verqu").text("");
					$("#verqu").removeClass("red");
					$("#verqu").addClass("green");
					flag = true;
					return flag;
				}
			}
			
			function testJuti(){
				var flag = true;
				if($("#juti").val()==""){
					$("#verjuti").text("请填写您的具体地址");
					$("#verjuti").removeClass("green");
					$("#verjuti").addClass("red");
					flag = false;
					return flag;
				}else{
					$("#verjuti").text("");
					$("#verjuti").removeClass("red");
					$("#verjuti").addClass("green");
					flag = true;
					return flag;
				}
			}
			
		});
	</script>
	
</head>
<body>
		<!-- 头部 start -->
		<div class="header w1210 bc mt15">
			<!-- 头部上半部分 start 包括 logo、搜索、用户中心和购物车结算 -->
			<div class="logo w1210">
				<h1 class="fl" >
					<a href="/user/loginreg/index">
						<img src="http://localhost:8083/fileserver/logo/logo.jpg" style="height: 70px; width: 150px;">
					</a>
				</h1>
			</div>
			<!-- 头部上半部分 end -->

			<div class="clear"></div>

			<!-- 导航条部分 start -->
			<div class="nav w1210 bc mt10">
				<div class="navitems fl">
					<ul class="fl">
						<li class="current">
							<a href="/user/loginreg/index">首页</a>
						</li>
						<li>
							<a href="/product/fytype">商品大全</a>
						</li>
						<li>
							<a href="/product/showtype?tid=1">手机频道</a>
						</li>
						<li>
							<a href="/product/showtype?tid=2">数码产品</a>
						</li>
						<li>
							<a href="/product/showtype?tid=3">家用电器</a>
						</li>
						<li>
							<a href="/product/showtype?tid=5">衣装服饰</a>
						</li>
						<li>
							<a href="/product/showtype?tid=7">电子图书</a>
						</li>
					</ul>
					<div class="right_corner" style="float:right;">
						<a href="/shopcar/show">购物车</a>
					</div>
				</div>
			</div>
			<!-- 导航条部分 end -->
		</div>
		<!-- 头部 end-->

		<div class="clear"></div>

		<!-- 页面主体 start -->
		<div class="main w1210 bc mt10">
			<div class="crumb w1210">
				<h2>
					<strong><a href="/user/userinfo">个人中心</a></strong>
					<span>></span>
					<span>收货地址</span>
				</h2>
			</div>

			<!-- 左侧导航菜单 start -->
			<div class="menu fl">
				<h3><a href="/user/userinfo">个人中心</a></h3>
				<div class="menu_wrap">
					<dl>
						<dt>订单中心</dt>
						<dd>&nbsp;&nbsp;
							<a href="/order/show">我的订单</a>
						</dd>
						<dd>&nbsp;&nbsp;
							<a href="/user/mycollect">我的收藏</a>
						</dd>
					</dl>
					<dl>
						<dt>账户中心</dt>
						<dd>&nbsp;&nbsp;
							<a href="/user/userinfo">个人信息</a>
						</dd>
						<dd class="cur">&nbsp;&nbsp;
							<a href="/user/showaddress">收货地址</a>
						</dd>
					</dl>
					<dl>
						<dt>个人卖家</dt>
						<dd>&nbsp;&nbsp;
							<a href="/systemer/usertjsp">个人卖家中心</a>
						</dd>
					</dl>
				</div>
			</div>
			<!-- 左侧导航菜单 end -->

			<!-- 右侧内容区域 start -->
			<div class="content fl ml10">
				<div class="user_hd">
					<h3><a href="/user/showaddress">收货地址</a></h3>
				</div>
				
				<div class="user_bd mt10">
					<div id="addressList" class="mod-main mod-comm">
						<div class="mt">
							<a id="add-address" class="btn-address btn-primary">新增收货地址</a>&nbsp;&nbsp;&nbsp;&nbsp;
							<span class="ftx-03">
								您已创建
								<span id="addrNum" class="ftx-02">${addressNum}</span>
								个收货地址，最多可创建
								<span class="ftx-02">20</span>
								个
							</span>
						</div>
						<div class="mc">
							<c:forEach items="${list}" var="addr" varStatus="i">
								<div class="sm easebuy-m">
									<div class="smt">
										<h3>${user.userSurname}</h3>
										<div class="extra">
											<a id="" class="btn-delete" href="/user/deladdress?zyAid=${addr.zyAid}"></a>
										</div>
									</div>
									<div class="smc">
										<div class="items new-items">
											<div class="item-lcol">
												<div class="item">
													<span>收货人：</span>
													<div id="" class=".float-left div-surname">${user.userSurname}</div>
													<div class="clear"></div>
												</div>
												<div class="item">
													<span>省：</span>
													<div id="" class=".float-left div-sheng">${addr.sheng}</div>
													<div class="clear"></div>
												</div>
												<div class="item">
													<span>市：</span>
													<div id="" class=".float-left div-shi">${addr.shi}</div>
													<div class="clear"></div>
												</div>
												<div class="item">
													<span>区/县：</span>
													<div id="" class=".float-left div-qu">${addr.qu}</div>
													<div class="clear"></div>
												</div>
												<div class="item">
													<span>具体地址：</span>
													<div id="" class=".float-left div-juti">${addr.juti}</div>
													<div class="clear"></div>
												</div>
												<div class="item">
													<span>手机：</span>
													<div class=".float-left">${user.userPhone}</div>
													<div class="clear"></div>
												</div>
											</div>
											<div class="item-rcol">
												<div class="extra">
													<input type="hidden" value="${addr.zyAid}" />
													<a class="ml10 ftx-05 edit-addr" href="">编辑</a>
												</div>
											</div>
											<div class="clear"></div>
										</div>
									</div>
								</div>
							</c:forEach>
						</div>
						<div id="addAddress_bottom" class="mt">
							<a id="add-address-bottom" class="btn-address btn-primary">新增收货地址</a>&nbsp;&nbsp;&nbsp;&nbsp;
							<span class="ftx-03">
								您已创建
								<span class="ftx-02">${addressNum}</span>
								个收货地址，最多可创建
								<span class="ftx-02">20</span>
								个
							</span>
						</div>
					</div>
					<div class="clear" ></div>
				</div>
			</div>
			<!-- 右侧内容区域 end -->
		</div>
		<!-- 页面主体 end-->

		<div class="clear"></div>
		
		<!-- 底部版权 start -->
		<div class="footer w1210 bc mt10">
			<div class="mt20">Joinlabs商城|JYUI|聊|多看书城|JY路由器|视频电话|JY天猫店|JY淘宝直营店|JY网盟|JY移动|隐私政策|Select Region</div>
			<div>©JY.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
			<div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
		</div>
		<!-- 底部版权 end -->
		<!-- 隐藏遮罩层 -->
		<div class="mask-trans hide"></div>
		<!-- 隐藏框做修改个人信息验证 start -->
		<div id="" class="thickbox hide">
			<div class="thicktitle">
				<span id="change-addrtitle"></span>
			</div>
			<div class="thickcon">
				<div id="edit-cont" class="m">
					<div class="mc">
						<div class="form">
							<form class="addr-form" action="" method="post">
								<input id="get-zyaid" type="hidden" name="zyAid" />
								<div class="item">
									<span class="label">
										<em>*</em>
										收货人：
									</span>
									<div class="float-left">
										<input id="surname-hide" type="hidden" value="${user.userSurname}" />
										<input id="surname" class="input-text input-text-one" />
										<input id="userid-hide" type="hidden" name="userId" value="${user.userId}" />
										<span id="versurname" class="versomething"></span>
									</div>
									<div class="clear"></div>
								</div>
								<div class="item">
									<span class="label">
										<em>*</em>
										省：
									</span>
									<div class="float-left">
										<select id="sheng" name="sheng" class="selt selt2">
											<option value="">请选择</option>
											<option value="湖南">湖南</option>
										</select>
										<span id="versheng" class="versomething"></span>
									</div>
									<div class="clear"></div>
								</div>
								<div class="item">
									<span class="label">
										<em>*</em>
										市：
									</span>
									<div class="float-left">
										<select id="shi" name="shi" class="selt selt2">
											<option value="">请选择</option>
											<option value="长沙">长沙</option>
										</select>
										<span id="vershi" class="versomething"></span>
									</div>
									<div class="clear"></div>
								</div>
								<div class="item">
									<span class="label">
										<em>*</em>
										区/县：
									</span>
									<div class="float-left">
										<select id="qu" name="qu" class="selt selt2">
											<option value="">请选择</option>
											<option value="芙蓉区">芙蓉区</option>
											<option value="天心区">天心区</option>
											<option value="岳麓区">岳麓区</option>
											<option value="开福区">开福区</option>
											<option value="雨花区">雨花区</option>
											<option value="望城区">望城区</option>
											<option value="长沙县">长沙县</option>
											<option value="宁乡县">宁乡县</option>
										</select>
										<span id="verqu" class="versomething"></span>
									</div>
									<div class="clear"></div>
								</div>
								<div class="item">
									<span class="label">
										<em>*</em>
										详细地址：
									</span>
									<div class="float-left">
										<input id="juti" class="input-text input-text-two" name="juti" />
										<span id="verjuti" class="versomething"></span>
									</div>
									<div class="clear"></div>
								</div>
								<div class="button">
									<a id="find-addr" class="btn-address btn-primary">保存收货地址</a>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			<a id="cancel" class="thickclose" href=""></a>
		</div>
	</body>
</html>